<template>
    <div :style="{marginTop:$store.state.navbarHeight+12+'rpx'}">
        <Navbar title="سېتىۋالغانلىرىم" :showIcon="true" bgColor="bg-gradual-2" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="videos">
                <div class="list">
                    <VideoCover :show="true" v-for="item in list" :key="item.vid" :info="item"></VideoCover>
                </div>
            </div>
        </div>
        <!-- 如果结果为空 -->
        <div class="empty" v-if="!list.length">
            <div class="notice">تۈگەپتۇ</div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import Navbar from "@/components/Navbar.vue";
import VideoCover from "@/components/VideoCover.vue";
export default {
    components: {
        Navbar,
        VideoCover
    },
    data() {
        return {
            list: []
        };
    },
    methods: {
        ...mapGetters(["customBar", "statusBar", "clientRect"])
    },
    onLoad() {
        let { uid } = this.$root.$mp.query;
        if (uid) {
            this.$http.get("/mpBuyList?uid=" + uid).then(res => {
                if (res.code == "001") {
                    this.list = res.list;
                }
            });
        }
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    border: 1rpx solid transparent;
    .videos {
        width: 98%;
        margin: 0 auto;
        .list {
            display: grid;
            grid-template-columns: 32% 32% 32%;
            grid-column-gap: 15rpx;
        }
    }
}
</style>